<template>
  <div class="fillContainer">
    <div>
      <el-form :inline="true" ref="add_data">
        <el-form-item class="btnRight">
          <el-button
            type="primary"
            size="small"
            icon="view"
            @click="handleAdd()"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="table_container">
      <el-table
        v-if="tableData.length > 0"
        :data="tableData"
        max-height="450"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          width="250"
          prop="created_at"
        >
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="道具名字"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="info"
          label="描述"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="goods_type.name"
          label="物品类型"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="rare_level"
          label="稀有度"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="price"
          label="商店固定价格"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="is_sell"
          label="是否可以交易（0不可交易，1可以交易）"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="is_system_sell"
          label="是否可以卖店（0不可交易，1可以交易）"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="use_type"
          label="使用类型（0消耗品，1材料）"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="skill"
          label="关联技能objID"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="monster"
          label="关联怪物掉落objID"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="task"
          label="关联任务需求ObjID"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="道具类型"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          align="center"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="_id"
          label="ObjectID"
          align="center"
          width="170"
        ></el-table-column>
        <el-table-column
          prop="operation"
          width="150"
          label="操作"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="small"
              icon="edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="small"
              type="danger"
              con="delete"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
          <div class="pagination">
            <div class="block">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="paginations.page_index"
                :page-sizes="paginations.page_sizes"
                :page-size="paginations.page_size"
                :layout="paginations.layout"
                :total="paginations.total"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <AddGoodDialog
      :dialog="dialog"
      :formData="formData"
      :format_type_list="format_type_list"
      @update="getGood"
    ></AddGoodDialog>
  </div>
</template>

<script>
import AddGoodDialog from "../components/AddGoodDialog";
export default {
  name: "goodTypeList",
  data() {
    return {
      paginations: {
        page_index: 1, // 当前位于页
        total: 0, // 页总数
        page_size: 5, // 一页显示总数
        page_sizes: [5, 10, 15, 20], // 每页显示多少条
        layout: "total, sizes, prev, pager, next, jumper",
      },
      tableData: [],
      alltableData: [],
      formData: {
        name: "",
        info: "",
        rare_level: "",
        price: "",
        is_sell: "",
        is_system_sell: "",
        use_type: "",
        skill: "",
        goods_type: {
          id: "",
          name: "",
        },
        monster:"",
        task:"",
        status: "",
        id: "",
      },
      dialog: {
        show: false,
        title: "",
        option: "edit",
      },
      filterTableData: [],
      goodtype: [],
      format_type_list:[],
    };
  },
  created() {
    this.getGood();
    this.getGoodType();
  },
  computed: {
    user() {
      return this.$store.getters.user;
    },
  },
  methods: {
    getGoodType() {
      // 获取表格数据
      this.$axios
        .get("/api/goods/types/get")
        .then((res) => {
          this.goodtype = res.data;
          this.addformat_type_list();
        })
        .catch((err) => console.log(err));
    },
    addformat_type_list() {
      for (let i = 0; i < this.goodtype.length; i++) {
        this.format_type_list.push({
          name: this.goodtype[i].name,
          id: this.goodtype[i]._id,
        });
      }
    },
    getGood() {
      // 获取表格数据
      this.$axios
        .get("/api/goods/getallgoods")
        .then((res) => {
          this.alltableData = res.data;
          this.filterTableData = res.data;
          // 设置分页数据
          this.setPaginations();
        })
        .catch((err) => console.log(err));
    },
    handleEdit(index, row) {
      // 编辑
      this.dialog = {
        show: true,
        title: "修改物品类型",
        option: "edit",
      };
      this.formData = {
        name: row.name,
        info: row.info,
        rare_level: row.rare_level,
        price: row.price,
        is_sell: row.is_sell,
        is_system_sell: row.is_system_sell,
        use_type: row.use_type,
        skill: row.skill,
        goods_type: row.goods_type._id,
        status: row.status,
        id: row._id,
      };
    },
    handleDelete(index, row) {
      this.$axios.delete(`/api/goods/delete/${row._id}`).then((res) => {
        this.$message("删除成功!");
        this.getGood();
      });
    },
    handleAdd() {
      this.dialog = {
        show: true,
        title: "添加物品类型信息",
        option: "add",
      };
      this.formData = {
        name: "",
        info: "",
        rare_level: "",
        price: "",
        is_sell: "",
        is_system_sell: "",
        use_type: "",
        skill: "",
        goods_type: "",
        monster:"",
        task:"",
        status: "",
        id: "",
      };
      this.dialog.show = true;
    },
    handleSizeChange(page_size) {
      // 切换size
      this.paginations.page_index = 1;
      this.paginations.page_size = page_size;
      this.tableData = this.alltableData.filter((item, index) => {
        return index < page_size;
      });
    },
    handleCurrentChange(page) {
      // 获取当前页
      let index = this.paginations.page_size * (page - 1);
      // 数据的总数
      let nums = this.paginations.page_size * page;
      // 容器
      let tables = [];

      for (let i = index; i < nums; i++) {
        if (this.alltableData[i]) {
          tables.push(this.alltableData[i]);
        }
      }
      this.tableData = tables;
    },
    setPaginations() {
      // 分页属性设置
      this.paginations.total = this.alltableData.length;
      this.paginations.page_index = 1;
      this.paginations.page_size = 5;
      // 设置默认分页的数据
      this.tableData = this.alltableData.filter((item, index) => {
        return index < this.paginations.page_size;
      });
    },
  },
  components: {
    AddGoodDialog,
  },
};
</script>

<style scoped>
.fillContainer {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
}
.btnRight {
  float: right;
}
.pagination {
  text-align: right;
  margin-top: 10px;
}
</style>

